import React, { useState, useEffect } from "react";
import "./index.less";
import { Button } from "antd-mobile";
import modalBackground from "@/assets/images/modalBackground.png";
import modalSuccess from "@/assets/images/modalSuccess.png";
import modalError from "@/assets/images/modalError.png";
import confirmIcon from "@/assets/images/confirm.png";
import addressIcon from "@/assets/images/zuobiao.svg";
import successIcon from "@/assets/images/success.png";

const CustomModal = ({
  visible = false,
  mode = "confirm", // position, confirm, error, success
  title = "",
  message = "",
  icon = "",
  onConfirm,
  onCancel,
  confirmText = "确定",
  cancelText = "取消",
  children,
  className = "",
  position = "center", // center, top, bottom
  footer = true,
}) => {
  const [isAnimating, setIsAnimating] = useState(false);

  console.log(visible, "visible");

  useEffect(() => {
    if (visible) {
      requestAnimationFrame(() => {
        setIsAnimating(true);
      });
    } else {
      setIsAnimating(false);
    }
  }, [visible]);

  if (!visible) return null;

  const getModeConfig = () => {
    const configs = {
      position: {
        icon: addressIcon,
        title: title || "位置权限请求",
        message: message || "为您推荐附近商户,可直接查看并前往~",
        confirmText: "允许",
        cancelText: "暂不允许",
        showCancel: true,
      },
      confirm: {
        icon: confirmIcon,
        title: title || "支付确认",
        message: message || "是否继续支付?",
        confirmText: "确定",
        cancelText: "取消",
        showCancel: true,
      },
      error: {
        icon: modalError,
        title: title || "哎呀, 小插曲",
        message: message || "非常抱歉 数智豆抵扣未能成功 请稍后, 为您原路返回",
        confirmText: "已知晓",
        cancelText: "",
        showCancel: false,
      },
      success: {
        icon: modalSuccess,
        title: title || "恭喜 申码成功",
        message: message || "快看看有哪些折扣商户~",
        confirmText: "确定",
        cancelText: "",
        showCancel: false,
      },
    };

    return configs[mode] || configs.position;
  };

  const config = getModeConfig();
  const finalTitle = title || config.title;
  const finalMessage = message || config.message;
  const finalIcon = icon || config.icon;
  const finalConfirmText = confirmText || config.confirmText;
  const finalCancelText = cancelText || config.cancelText;

  return (
    <div
      className={`custom-modal-backdrop ${position} ${
        isAnimating ? "show" : "hide"
      }`}
    >
      <div
        className={`custom-modal ${mode} ${position} ${className} ${
          isAnimating ? "show" : "hide"
        }`}
      >
        <div className="modal-background">
          <img src={modalBackground} alt="" className="background-image" />
        </div>

        <div className="modal-content">
          {finalIcon && (
            <div className="modal-icon">
              <img
                src={finalIcon}
                alt=""
                className="icon-image"
                style={{ paddingLeft: mode === "position" ? "24px" : null }}
              />
              {["position", "success", "confirm"].includes(mode) && (
                <div className="success-overlay">
                  <img src={successIcon} alt="" className="success-image" />
                </div>
              )}
            </div>
          )}

          {finalTitle && <div className="modal-title">{finalTitle}</div>}

          {finalMessage && <div className="modal-message">{finalMessage}</div>}

          {children && <div className="modal-children">{children}</div>}

          {footer && (
            <div className="modal-actions">
              {config.showCancel && finalCancelText && (
                <Button
                  className="modal-button cancel-button"
                  onClick={(e) => {
                    onCancel();
                  }}
                >
                  {finalCancelText}
                </Button>
              )}

              <Button
                className="modal-button confirm-button"
                onClick={(e) => {
                  onConfirm();
                }}
              >
                {finalConfirmText}
              </Button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default CustomModal;
